javascript 页面跳转 传值 | 您所在的位置:网站首页 › html button onclick跳转页面 › javascript 页面跳转 传值 |
在前端开发中,经常会涉及到页面跳转和传值的问题。其中 JavaScript 是一种广泛应用的语言,可以通过其实现页面跳转并传递参数的功能。本文将介绍 JavaScript 页面跳转和传值的方法,并提供一些应用实例。 一、JavaScript 实现页面跳转的方法 window.location.hrefwindow.location.href 的作用是加载新的页面。通过这个方法,可以在当前页面跳转到指定的页面。例如,下面的代码可以在当前页面跳转到被指定为 “newpage.html” 的页面: window.location.href = "newpage.html"; 在进行页面跳转的同时,也可以向新页面传递参数。例如: window.location.href = "newpage.html?username=Tom&age=20"; window.location.replace另一种实现页面跳转的方法是使用 window.location.replace。这个方法的作用是用新的页面替换当前页面。例如,下面的代码将会在当前页面被指定为 “newpage.html” 的页面所替换: window.location.replace("newpage.html"); 对于这个方法而言,在进行页面跳转的同时是不能传递参数的。 window.openwindow.open 允许以新的浏览器窗口方式打开一个指定的网页。例如,下面的代码将会在新的窗口中打开一个指定为 “newpage.html” 的页面: window.open("newpage.html"); 同样的,通过这个方法同样可以传递参数。例如: window.open("newpage.html?username=Tom&age=20"); 二、JavaScript 页面传参的方法 URL 传参数URL 传参数是实现页面传参的一种简单易用的方法,它将参数作为 URL 中的参数传递给新页面。例如: window.location.href = "newpage.html?username=Tom&age=20"; 在新页面中,可以使用 JavaScript 中的 URLSearchParams 对象获取 URL 中的参数。例如: //获取 URL 中的参数 const searchParams = new URLSearchParams(window.location.search); //获取用户名 const username = searchParams.get('username'); //获取年龄 const age = searchParams.get('age'); sessionStoragesessionStorage 是 HTML5 提供的 Web 存储方案,与 localStorage 相似,但是存储的数据是会话级别的,当会话结束时数据会被清除。可以使用 sessionStorage 在页面之间传递数据。例如,在前一个页面中设置传递的参数: //设置传递的参数 sessionStorage.setItem('username', 'Tom');sessionStorage.setItem('age', 20); 在后一个页面中,可以通过 sessionStorage 获取传递的参数: //获取传递的参数 const username = sessionStorage.getItem('username');const age = sessionStorage.getItem('age'); localStoragelocalStorage 也是 HTML5 提供的 Web 存储方案,与 sessionStorage 不同的是,localStorage 存储数据是永久性的,即使关闭页面或浏览器也不会被清除。可以使用 localStorage 在页面之间传递数据。例如,在前一个页面中设置传递的参数: //设置传递的参数 localStorage.setItem('username', 'Tom');localStorage.setItem('age', 20); 在后一个页面中,可以通过 localStorage 获取传递的参数: //获取传递的参数 const username = localStorage.getItem('username');const age = localStorage.getItem('age'); 三、应用实例 下面是一个实际应用的例子,实现一个包含表单的页面跳转,并将表单中的数据传递到下一个页面。 页面一(index.html)页面一 登录后复制 用户名: 密码: 跳转到页面二 /** * 提交表单,跳转到页面二 */ function submitForm() { const username = document.getElementById("username").value; const password = document.getElementById("password").value; const params = `username=${username}&password=${password}`; window.location.href = `pageTwo.html?${params}`; } 登录后复制 页面二(pageTwo.html) 页面二 登录后复制
用户名: 密码: /** * 获取 URL 参数 */ function getSearchParams() { const searchParams = new URLSearchParams(window.location.search); const username = searchParams.get('username'); const password = searchParams.get('password'); document.getElementById("username").innerText = username; document.getElementById("password").innerText = password; } getSearchParams(); 登录后复制
在页面一中,当点击提交按钮时,会执行 submitForm 方法,将表单中的数据拼接成一个参数并传递到页面二中。在页面二中,会通过 getSearchParams 方法获取 URL 参数并显示在页面上。 总结 本文介绍了 JavaScript 页面跳转和传值的方法,并提供了一些应用实例,旨在帮助读者更好地理解并掌握这些技术。在实际开发中,应根据情况选择合适的方法,使得页面跳转和传值更加简单、高效、安全。 以上就是javascript 页面跳转 传值的详细内容,更多请关注php中文网其它相关文章! |
CopyRight 2018-2019 实验室设备网 版权所有 |